<template>
	<view>
		<nav-bar title="地址选择"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<map class="map" id="mapId" ref="mapId" :latitude="mapCenter.latitude" :longitude="mapCenter.longitude" show-location="true" @regionchange="mapViewChange">
			<!-- #ifndef H5 -->
			<cover-image class="icon_map_current" @click="mapMobile()" src="https://qn.kemean.cn/upload/201904/28/00b4455157dd4f08b76a21c57c5fe7d7"></cover-image>
			<!-- #endif -->
			<cover-image class="map_center_icon" src="https://qn.kemean.cn/upload/201908/22/701ea93909a74134b0ea139f2de10e2a"></cover-image>
		</map>
		<view class="mapSearchBox">
			<view class="searchBox">
				<text></text>
				<input type="text" placeholder="建议输入附近地标名称搜索" @input="onInput" v-model="keywords" confirm-type="search"/>
			</view>
			<scroll-view class="searchListBox" scroll-y :scroll-top="scrollTop" @scrolltolower="onSearch">
				<view class="searchList" v-for="(item, index) of searchList" :key="index" @click="onAddress(item, index)">
					<view class="addressInfo">
						<text>{{ item.name }}</text>
						<text>{{ item.district || "" }}{{item.address}}</text>
					</view>
					<text class="icon" :class="[selectIndex === index ? 'active' : '']"></text>
				</view>
				<view class="no_data" v-if="noData">
					未搜索到数据
				</view>
				<view class="seat"></view>
			</scroll-view>
		</view>
		<button class="fixed_btn" @click="onConfirm">确定</button>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { getLatLon } from '@/config/utils';
let clearTime;
let mapContext;
let viewChange = true;
export default {
	data() {
		return {
			keywords: '',
			scrollTop:0,
			searchList: [],
			pageNo:1,
			loadState:true,
			noData:false,
			searchType:1000,
			//防止重复搜索
			oldSearchText: '',
			addressInfo: {},
			selectIndex: 9999,
			mapCenter:{}
		};
	},
	computed: {
		...mapState(['currentAddress'])
	},
	//第一次加载
	onLoad(e) {
		const _this = this;
		console.log("默认=",this.currentAddress);
		if(this.currentAddress.longitude && this.currentAddress.latitude){
			this.mapCenter = this.currentAddress;
			this.onSearch();
		}else{
			console.log("------------------");
			getLatLon().then(res => {
				this.mapCenter = res;
				this.onSearch();
			},err => {
				this.$http.jsonp("https://api.map.baidu.com/location/ip",{
					ak:"HQi0eHpVOLlRuIFlsTZNGlYvqLO56un3",
					coor:"bd09ll"
				}).then(res => {
					this.mapCenter = {
						longitude: res.content.point.x,
						latitude: res.content.point.y
					};
					this.onSearch();
				});
			});
		}
	},
	onReady(){
		mapContext = uni.createMapContext("mapId", this);
	},
	//页面显示
	onShow() {},
	//方法
	methods: {
		...mapMutations(['setSelectAddress']),
		// 搜索框输入
		onInput(){
			clearTime && clearTimeout(clearTime);
			clearTime = setTimeout(() => {
				if (this.oldSearchText !== this.keywords) {
					this.pageNo = 1;
					this.loadState = true;
					this.noData = false;
					this.selectIndex = 9999;
					this.searchType = 2000;
					this.onSearch();
				}else if(this.keywords == ""){
					this.pageNo = 1;
					this.loadState = true;
					this.noData = false;
					this.selectIndex = 9999;
					this.searchType = 1000;
					this.onSearch();
				}
			},400);
		},
		
		//移动地图
		mapMobile() {
			// #ifndef H5
			mapContext.moveToLocation();
			// #endif
		},
		// 地图视野发生变化
		mapViewChange(){
			if(viewChange){
				mapContext.getCenterLocation({
					success:res => {
						this.mapCenter = res;
						this.pageNo = 1;
						this.loadState = true;
						this.noData = false;
						this.searchType = 1000;
						this.selectIndex = 9999;
						this.onSearch();
					}
				});
			}
		},
		//输入搜索
		onSearch() {
			if(this.loadState){
				let httpData = {
					pageNo:this.pageNo,
					pageSize:15,
				};
				let url = "";
				if(this.searchType == 1000){
					url = "api/open/v1/gaode_around";
					httpData.longitude = this.mapCenter.longitude;
					httpData.latitude = this.mapCenter.latitude;
				} else {
					url = "api/open/v1/gaode_keywords";
					httpData.longitude = this.mapCenter.longitude;
					httpData.latitude = this.mapCenter.latitude;
					httpData.keywords = this.keywords;
				}
				this.$http.get(url,httpData).then(res => {
					if(this.pageNo == 1){
						this.searchList = res;
						this.scrollTop = 0;
						if(res.length == 0){
							this.noData = false;
						}
					}else{
						this.searchList = this.searchList.concat(res);
					}
					if(res.length >= 15){
						this.pageNo++;
					}else{
						this.loadState = false;
					}
					if(this.searchType == 2000){
						this.oldSearchText = this.keywords;
					}
				});
			}
		},
		//选择地址
		onAddress(item, index) {
			this.selectIndex = index;
			viewChange = false;
			if(item.location){
				let lngLat = item.location.split(",");
				this.mapCenter = {
					longitude: lngLat[0],
					latitude: lngLat[1]
				};
			}
			clearTimeout(clearTime);
			clearTime = setTimeout(() => {
				viewChange = true;
			},800);
		},
		//确定地址
		onConfirm() {
			if (this.selectIndex === 9999) {
				uni.showToast({
					title: '请选择地址',
					icon: 'none'
				});
			} else {
				const item = this.searchList[this.selectIndex];
				let lngLat = item.location.split(",");
				this.setSelectAddress({
					longitude: lngLat[0],
					latitude: lngLat[1],
					name: item.name,
					address: item.address,
					type: 3
				});
				uni.navigateBack();
			}
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss">
@import '@/style/mixin.scss';
.no_data {
	padding: 30rpx;
	font-size: 28rpx;
	color: #333;
	text-align: center;
}
.map {
	width: 100%;
	height: 400rpx;
	position: relative;
	.icon_map_current {
		position: absolute;
		left: 30rpx;
		bottom: 30rpx;
		width: 60rpx;
		height: 60rpx;
	}
	.map_center_icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		width: 40rpx;
		height: 48rpx;
	}
}
.mapSearchBox {
	background-color: #ffffff;
	border-radius: 40rpx 40rpx 0 0;
	height: calc(100vh - 488rpx - var(--status-bar-height));
	padding: 30rpx 0;
	.searchBox {
		display: flex;
		margin: 0 30rpx;
		height: 73rpx;
		background-color: #f0f0f0;
		border-radius: 26rpx;
		align-items: center;
		padding: 0 30rpx;
		text {
			flex-shrink: 0;
			width: 30rpx;
			height: 30rpx;
			background-image: url('../../../static/icon/ic_search.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
		}
		input {
			margin-left: 15rpx;
			height: 73rpx;
			background-color: transparent;
			flex: 1;
			font-size: 28rpx;
		}
	}
	.searchListBox {
		margin-top: 30rpx;
		overflow-y: auto;
		height: calc(100% - 80rpx);
		.searchList {
			padding: 30rpx 30rpx;
			border-top: 1px solid #efefef;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:active {
				background-color: #f5f5f5;
			}
			&:first-child {
				border-top: 0;
			}
			.addressInfo {
				display: flex;
				flex-direction: column;
				width: calc(100% - 60rpx);
				text:nth-child(1) {
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
				}
				text:nth-child(2) {
					font-size: 24rpx;
					color: #999999;
					margin-top: 15rpx;
					line-height: 150%;
				}
			}
			.icon {
				width: 34rpx;
				height: 34rpx;
				@include theme('unselected_img', '../../../');
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center center;
				&.active {
					@include theme('radio_img', '../../../');
				}
			}
		}
		.seat {
			height: 120rpx;
		}
	}
}

.fixed_btn {
	position: absolute;
	bottom: 20rpx;
	left: 20rpx;
	right: 20rpx;
	height: 88rpx;
	line-height: 88rpx;
	background-color: $themeColor;
	color: #fff;
	border-radius: 10rpx;
	z-index: 3;
}
</style>
